<!--
 * @Author: 刘翔
 * @Date: 2025-08-20 15:00:16
 * @LastEditTime: 2025-09-01 16:39:40
 * @LastEditors: your name
 * @Description:组合页面9
 * @FilePath: \建达文件\ts-demo\ts-demo\src\pptHome\pageList\pageType9.vue
-->

<template>
  <div class="page-type-9">
    <div class="page-type-9-top">
      <DataTableVertical ref="table1" v-bind="getTableProps1()" />
    </div>
    <div class="page-type-9-bottom">
      <CardBox>
        <template #right>
          <span class="card-box-right-item-1" v-html="desc"></span>
        </template>
      </CardBox>
    </div>
  </div>
</template>

<script>
import DataTableVertical from '../components/DataTableVertical.vue';
import CardBox from '../components/cardBox.vue';
export default {
  name: 'pageType9',
  components: {
    CardBox,
    DataTableVertical,
  },
  props: {
    tableData1: {
      type: Object,
      default: () => {},
    },
    desc: {
      type: String,
      default: '',
    },
  },
  methods: {
    getTableProps1() {
      return {
        tableData: this.tableData1,
        columns: this.tableData1.columns,
        tableParams: {
          headerHeight: 60,
        },
        pptOptions: {
          x: 0.3, // X轴位置
          y: 0.8, // Y轴位置
          h: 3.3, // 高度
          title: {
            // 标题配置
            x: 0.5,
            y: 0.5,
            fontSize: 24,
            color: '363636',
            bold: true,
          },
          table: {
            // 表格配置
            colW: [
              ...this.tableData1.columns.columns1.map(item => this.pptWidthPercentFn(item.widthPercent)),
              ...this.tableData1.columns.columns2.map(item => this.pptWidthPercentFn(item.widthPercent)),
            ],
            // 表格内容配置
            content: {
              fontSize: 8,
              color: '000000',
              bold: true,
            },
            // 表格标题配置
            title: {
              fontSize: 8,
              color: 'ffffff',
            },
            // 表格边框样式
            borderStyle: {
              color: '000000',
            },
            // 表格垂直对齐方式(middle, top, bottom)
            valign: 'middle',
            // 表格水平对齐方式(left, center, right)
            align: 'center',
            // 自动分页
            autoPage: false,
            // 自动分页标题是否显示
            autoPageRepeatHeader: false,
            // 自动分页标题行数
            autoPageHeaderRows: 1,
          },
        },
      };
    },
    // 计算ppt宽度百分比(9.3是ppt表格目前总宽度)
    pptWidthPercentFn(pptWidthPercent) {
      return (pptWidthPercent / 100) * 9.3;
    },
    // 解析带颜色的文本
    parseColoredText(text) {
      return text
        .split(/(<span[^>]*>.*?<\/span>|<br\/?>)/i)
        .filter(part => part) // 移除空字符串
        .map(part => {
          // 检查是否是换行标签
          if (/<br\/?>/.test(part)) {
            return { text: '', color: '#000000', breakLine: true };
          }
          // 检查是否是带颜色的span标签
          const match = part.match(/<span[^>]*color:(#[0-9a-f]+)[^>]*>(.*?)<\/span>/i);
          return match ? { text: match[2], color: match[1], breakLine: false } : { text: part, color: '#000000', breakLine: false };
        });
    },
    exportToPPT(pptx, slide) {
      this.$refs.table1.exportToPPT(pptx, slide);
      let textList = [];
      this.parseColoredText(this.desc).forEach(item => {
        textList.push({
          text: item.text,
          options: {
            fontSize: 10,
            color: item.color,
            //换行
            breakLine: item.breakLine,
          },
        });
      });
      //卡片
      slide.addText(textList, {
        shape: pptx.shapes.ROUNDED_RECTANGLE,
        x: 0.2,
        y: 4.5,
        w: 9.5,
        h: 1,
        rectRadius: 0.2,
        //边框
        line: { color: '151515', width: 0.5 },
        fill: { color: 'fff2ca' },
      });
    },
  },
};
</script>

<style lang="less" scoped>
.page-type-9 {
  width: 100%;
  height: 100%;
  .page-type-9-top {
    width: 100%;
    height: 80%;
  }
  .page-type-9-bottom {
    width: 100%;
    height: 15%;
    font-size: 2rem;
    .card-box-right-item-1 {
      display: block;
      height: 100%;
      font-size: 20px;
    }
  }
  .card-box-container {
    margin: 10px 0;
  }
}
</style>
